<template>
	<view>
		<uni-popup ref="selectTypeRef" @maskClick="closePopup">
			<view class="popup-bd">
				<view class="popup-bottom-copy">
					<view
						class="df ac jsc text"
						@tap="handlerSelectType('camera')"
						>拍摄</view
					>
					<view
						class="df ac jsc text"
						@tap="handlerSelectType('album')"
						>从相册中选</view
					>
					<view class="df ac jsc text" @tap="handlerSelectFile"
						>上传附件</view
					>
					<view class="cancle df ac jsc" @tap="closePopup">取消</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {}
	},
	methods: {
		closePopup() {
			this.$refs.selectTypeRef.close()
			this.$emit('close')
		},
		openPopup() {
			this.$nextTick(() => {
				this.$refs.selectTypeRef.open('bottom')
			})
		},
		handlerSelectType(type) {
			this.$emit('handlerSelectType', type)
			this.closePopup()
		},
		handlerSelectFile() {
			this.$emit('handlerSelectFile')
			this.closePopup()
		},
	},
	watch: {
		show: {
			immediate: true,
			handler(val) {
				if (val) {
					this.openPopup()
				} else {
					this.closePopup()
				}
			},
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: auto;
}
.text,
.cancle {
	width: 100%;
	height: 100rpx;
	font-size: 30rpx;
}
.text {
	color: #4c4f54;
	border-bottom: 1px solid #f0f2f1;
}
.popup-bottom-copy {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	/* height: 120rpx; */
	z-index: 99;
	background-color: #ffffff;
	box-shadow: 0px -2px 16px 0px rgba(0, 0, 0, 0.08);
}
</style>
